﻿<!DOCTYPE html>
<html>
<head>
	<title>报缺单</title>

	<meta name="keywords" content="keyword1,keyword2,keyword3">
	<meta name="description" content="this is my page">
	<meta name="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/static/css/public.css" media="all" />
	<script type="text/javascript" src="/static/plugin/jquery/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
	<script type="text/javascript" src="/static/js/public.js"></script>
	<script type="text/javascript" src="/static/js/base.js"></script>

</head>

<body  class="layui-anim">
<div class="x-nav">
	    <span class="layui-breadcrumb">
	        <a href="">首页</a>
	        <a>
	            <cite>报缺单</cite>
	        </a>
	    </span>
</div>
<div class="x-body">
	<div class="layui-row" style="margin-bottom: 18px">
		<form class="layui-form">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" id="keyword01" class="layui-input searchVal" placeholder="请输入报缺单编号" />
				</div>
				<div class="layui-input-inline">
					<input class="layui-input" id="startTime" placeholder="请输入开始时间" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">
					-<input class="layui-input" id="endTime" placeholder="请输入结束时间" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">
				</div>
				<button type="button" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
			</div>
		</form>
	</div>
	<xblock>
		<button class="layui-btn layui-btn-danger" id="import"><i class="layui-icon layui-icon-download-circle"></i>导入</button>
		<button type="button" id="uploadBtnPicking" class="layui-btn layui-btn-normal">生成领料单</button>
	</xblock>
	<table class="layui-hide" id="tableList" lay-filter="tableList"></table>
	<table class="layui-hide" id="tableListDetail" lay-filter="tableListDetail"></table>
</div>

<!--导入模板-->
<div class="modal fade" id="importDiv" hidden="hidden" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-body">
				<div style="text-align: center; padding: 5px">
					<a href="/static/excel/reportDeficiencyOrder.xls">
						<img alt="导入模板" src="/static/images/excel_alt_1.png" style="width: 20px;"/>
						<span style="font-size: 15px; font-weight:200;color:red">报缺单-模板.xls</span>
					</a>
				</div>
				<form id="importForm" class="layui-form" enctype="multipart/form-data">
					<div title="Excel导入操作" style="margin-left: 105px; padding: 5px">
						<input id="file" name="file" type="file" style="margin-bottom: 20px" accept=".xls,.xlsx"/>
					</div>
				</form>
				<div align="center">
					<button type="button" id="uploadBtn" class="layui-btn layui-btn-blue">导入</button>
					<button type="button" id="reset" class="layui-btn layui-btn-primary">取消</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	layui.config({
        base: '/static/module/'
    }).extend({
        layuiTableColumnEdit:'js/layuiTableColumnEdit'
    }).use(['table','layer','upload','form','laydate','layuiTableColumnEdit'], function(){
		var table = layui.table;
		var layer = layui.layer;
		var form = layui.form;
		var laydate = layui.laydate;
        var layuiTableColumnEdit = layui.layuiTableColumnEdit;


        /********************************* 开始时间结束时间设置 star *********************************/
        //日期时间范围
        var minListDate = "1000-01-01 00:00:00";//最小可选时间，例：1990-02-01
        var maxListDate = "3000-12-31 23:59:59";//最大可选时间，例：2200-12-31
		//结束时间
		var enddate = laydate.render({
			elem: "#endTime",
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
			min: minListDate,
			max: maxListDate,
			done: function (val, date) {
				if (date && date.year){
                    //设置结束时间 设置开始时间的最大值为结束时间
                    begindate.config.max = {
                        year: date.year,
                        month: date.month - 1,//必须减1才是正确值
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    };
				}else {
					//清除结束值    设置开始时间最大值
					var dateInit = new Date(maxListDate.replace(/-/g, "/"));
                    begindate.config.max = {
                        year: dateInit.getFullYear(),
                        month: dateInit.getMonth(),
                        date: dateInit.getDate(),
                        hours: dateInit.getHours(),
                        minutes: dateInit.getMinutes(),
                        seconds: dateInit.getSeconds()
                    };
				}
			}
		});
		//开始时间
		var begindate = laydate.render({
			elem: "#startTime",
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
			min: minListDate,
			max: maxListDate,
			done: function (val, date) {
				if (date && date.year){
					//设置开始时间 设置结束时间的最小值为开始时间
                    enddate.config.min = {
                        year: date.year,
                        month: date.month - 1,
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    };
				}else {
					//清除开始值 ，设置结束值最小值
					var dateInit = new Date(minListDate.replace(/-/g, "/"));
                    enddate.config.min = {
                        year: dateInit.getFullYear(),
                        month: dateInit.getMonth(),
                        date: dateInit.getDate(),
                        hours: dateInit.getHours(),
                        minutes: dateInit.getMinutes(),
                        seconds: dateInit.getSeconds()
                    };
				}
			}
		});
		/********************************* 开始时间结束时间设置  end*********************************/
		var $ = layui.jquery, active = {
			reload:function () {
				var whereStr = ""
				var keyword01 = $("#keyword01").val();
				var startTime = $("#startTime").val();
				if(startTime != ""){
					whereStr += " and createDate >= '''" + startTime+"'''"
				}
				var endTime = $("#endTime").val();
				if(endTime != ""){
					whereStr += " and createDate <= '''" + endTime+"'''"
				}
				table.reload('contenttable',{
					method:'get',
					where:{"whereStr":whereStr,"rdoNumber":keyword01}
					,page: {
						curr: 1//重新从第 1 页开始
					}
				});
			},
		}

		$('.layui-btn').on('click', function(){
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
		var tableIns = table.render({
			elem: '#tableList'
			,url:'/reportDeficiencyOrder/orderList'
			,title: '报缺单'
			,id :'contenttable'
			,limits:[10,20,30]
			,toolbar: '#toolbar'
			,request: {   //如果无需自定义请求参数，可不加该参数
				pageName: 'page' //页码的参数名称，默认：page
				,limitName: 'pageSize' //每页数据量的参数名，默认：limit
			}
			,response: {   //如果无需自定义数据响应名称，可不加该参数
				countName: 'total' //规定数据总数的字段名称，默认：count
				,dataName: 'rows' //规定数据列表的字段名称，默认：data
			}
			,cols: [
				[
					{type: 'checkbox', fixed: 'left'}
					,{field:'rdoId', title:'序号', sort: true, type:'numbers', width: 60}
					,{field:'rdoNumber', title:'报缺单编号'}
                    ,{field:'mainframe.mname', title:'主机厂名称'
						,templet: function(d){
							var value = "";
							if(d.mainframe != null){
								value = d.mainframe.mname
							}
							return value;
						},
					}
					,{field:'dispatchBy', title:'调度人'}
					,{field:'remark1', title:'备注1'}
					,{field:'remark2', title:'备注1'}
					,{field:'delFlag', title:'状态'
						,templet: function(d){
							var value = "";
							if(d.delFlag == 0){
								value = "未操作"
							}else if(d.delFlag == 1){
								value = "已操作"
							}
							return value;
						}, //hide:true,
					}
					,{field:'createBy', title:'创建人'}
					,{field:'createDate', title:'创建时间'
						,templet: function(d){
							var value = d.createDate;
							return formatTime(value,"yyyy-MM-dd HH:mm");
						},
					}
				]
			]
			,page: true
			,done : function(){
				$('th').css({
					'background-color': '#009688', 'color': '#fff','font-weight':'bold',
				})
			}
		});
		table.render({
			elem: '#tableListDetail'
			,title: '报缺单详情'
			,id :'contenttableDetail'
			,data:new Array()
			,limits:[10,20,30]
			,toolbar: '#toolbar'
			,request: {   //如果无需自定义请求参数，可不加该参数
				pageName: 'page' //页码的参数名称，默认：page
				,limitName: 'pageSize' //每页数据量的参数名，默认：limit
			}
			,response: {   //如果无需自定义数据响应名称，可不加该参数
				countName: 'total' //规定数据总数的字段名称，默认：count
				,dataName: 'rows' //规定数据列表的字段名称，默认：data
			}
			,cols: [
				[
					{type: 'checkbox', fixed: 'left'}
					,{field:'todid', title:'序号', sort: true, type:'numbers', width: 60}
					,{field:'material.maNumber', title:'图号'
						,templet: function(d){
							var value = "";
							if(d.material != null){
								value = d.material.maNumber
							}
							return value;
						},
					}
                    ,{field:'material.maName', title:'产品名称'
						,templet: function(d){
							var value = "";
							if(d.material != null){
								value = d.material.maName
							}
							return value;
						},
					}
                    ,{field:'material.remark01', title:'备注1'
						,templet: function(d){
							var value = "";
							if(d.material != null){
								value = d.material.remark01
							}
							return value;
						},
					}
					,{field:'material.remark02', title:'备注2'
						,templet: function(d){
							var value = "";
							if(d.material != null){
								value = d.material.remark02
							}
							return value;
						},
					}
                    ,{field:'demandTime', title:'需求时间'}
                    ,{field:'urgency', title:'紧急程度'}
					,{field:'rdodNum', title:'数量'}
				]
			]
			,page: true
			,done : function(){
				$('th').css({
					'background-color': '#009688', 'color': '#fff','font-weight':'bold',
				})
			}
		});




		//监听复选框事件
		table.on('checkbox(tableList)',function(obj){
			if(obj.checked == true && obj.type == 'all'){
				//点击全选
				$('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
			}else if(obj.checked == false && obj.type == 'all'){
				//点击全不选
				$('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
			}else if(obj.checked == true && obj.type == 'one'){
				//点击单行
				if(obj.checked == true){
					obj.tr.addClass('layui-table-click');
				}else{
					obj.tr.removeClass('layui-table-click');
				}
			}else if(obj.checked == false && obj.type == 'one'){
				//点击全选之后点击单行
				if(obj.tr.hasClass('layui-table-click')){
					obj.tr.removeClass('layui-table-click');
				}
			}
		})


		//行点击配置
		table.on('row(tableList)', function(obj){
			var data = obj.data;
			table.reload('contenttableDetail',{
				method:'get'
				,url:'/reportDeficiencyOrder/orderDetailList'
				,where:{"rdoId":data.rdoId}
				,page: {
					curr: 1//重新从第 1 页开始
				}
			});
		});

		$('#uploadBtnPicking').click(function() {
			var checkStatus = table.checkStatus('contenttable');
			if (checkStatus.data.length != 1){
				layer.msg("请选择一条数据",{icon:'2'});
				return;
			}

			if (checkStatus.data[0].delFlag == 1){
				layer.msg("已经生成领料单，请移步领料单管理",{icon:'2'});
				return;
			}

			$.ajax({
				type:'get',
				data:{'rdoId':checkStatus.data[0].rdoId},
				url:'/reportPicking/addReportPicking',
				success:function (result) {
					if(result == 1){
						layer.msg("领料单据生成成功，请查看领料单管理",{icon:'1'});
						//刷新
						tableIns.reload();
					}
				}
			});
		});

		/*==============导入===============*/
        $("#import").click(function(){
            layer.open({
                type: 1 					//Page层类型
                ,area: ['380px', '200px'] 	//宽  高
                ,title: '导入&nbsp;<span style="color: green">注：请点击红色链接下载模板</span>'
                ,shade: 0.6 				//遮罩透明度
                ,maxmin: true 				//允许全屏最小化
                ,anim: 1 					//0-6的动画形式，-1不开启
                ,content:$('#importDiv')
                ,success: function(){
                    $("#file").val("")
                    form.render();
                }
            });
        });
        $("#reset").click(function(){
            layer.closeAll();
        });



        $("#uploadBtn").click(function(){
            var fileName = $("#file").val();
            var formData = new FormData($("#importForm")[0]);
			if(fileName != null && fileName != ""){
                $.ajax({
                    url: '/reportDeficiencyOrder/uplodeFile' ,
                    type: 'post',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if (data == 1) {
                            layer.msg("文件导入成功！",{icon:6});
                            setTimeout(function() {//使用setTimeout()方法设定定时2000毫秒
                                location.reload();
                            },1000);
                        }else if(data == -1) {
                            layer.msg("导入的数据缺失！", {icon: 5});
                        }else if(data == -2){
                            layer.msg("导入的数据不符合导入条件！",{icon:5});
                        }else{
                            layer.msg("文件格式异常，文件导入失败！",{icon:5});
                        }
                    },
                    error: function (data) {
                        layer.msg("文件格式异常，文件导入失败！",{icon:5});
                    }
                });
			}else{
                layer.msg("请输入导入文件！",{icon:5});
			}


        });

	});

</script>
</body>
</html>
